<template>
  <!--卡片公共样式 -->
  <el-card class="box-card">
    <div slot="header" class="header-wrap">
      <div class="left">
        <div class="start"></div>
        <slot name="subtitle">副标题</slot>
      </div>
      <div class="right">
        <div v-if="infoDisplay1" class="flexwrap">
          <div
            class="info-box"
            :style="{ 'background-color': infoColor1 }"
          ></div>
          <slot name="info-title1">详细指标</slot>
        </div>
        <div v-if="infoDisplay2" class="flexwrap">
          <div
            class="info-box"
            :style="{ 'background-color': infoColor2 }"
          ></div>
          <slot name="info-title2">详细指标</slot>
        </div>
        <el-select v-model="value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="success" v-if="btnDisplay1">导出</el-button>
        <el-button type="primary" v-if="btnDisplay2">全部</el-button>
      </div>
    </div>
    <slot name="footer"></slot>
  </el-card>
</template>

<script>
export default {
  props: [
    //用于控制是否显示
    "infoDisplay1",
    "infoDisplay2",
    "infoColor1", //用于控制展示颜色
    "infoColor2",
    "selectDisplay",
    "btnDisplay1",
    "btnDisplay2",
  ],
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "草莓棚",
        },
        {
          value: "选项2",
          label: "香蕉棚",
        },
        {
          value: "选项3",
          label: "苹果棚",
        },
      ],
      value: "选项1", //初始默认值
    };
  },
};
</script>

<style lang="less" scoped>
@height: 20px;
@blue: rgb(109, 133, 246);
@green: rgb(31, 203, 184);
@darkgray: #606266;
//左边副标题样式
.box-card {
  width: 480px;
  .header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      .start {
        float: left;
        width: 7px;
        height: @height;
        background-color: @blue;
        margin-right: 12px;
      }
    }
    //右边选项样式
    .right {
      display: flex;
      align-items: center;
      .flexwrap {
        display: flex;
        margin-left: 16px;
        .info-box {
          height: @height;
          width: @height;
          margin-right: 9px;
        }
      }
      .el-select {
        margin-left: 16px;
        width: 100px;
        height: 30px;
        /deep/.el-input .el-input__inner {
          background-color: rgb(203, 202, 202);
        }
        /deep/.el-input .el-input__suffix-inner .el-icon-arrow-up::before {
          content: "";
          color: darkgray;
        }
      }
    }
    .el-button--success {
      margin-left: 10px;
      background-color: @green;
    }
    .el-button--primary {
      background-color: @blue;
    }
  }
}
</style>